<template>
	<view class="main">
		<u-navbar :is-back="true" title="添加规格" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="all">
			<view class="operates" v-for="(item,index) in typelist" :key="index">
				<view class="operate" @click="opare(index,item.tid,item.info)">
					<text>{{item.tname}}</text>
					<image src="../../../static/images/right.png" mode=""></image>
				</view>
				<view class="son" v-if="item.flag" v-for="(optare,ids) in item.info" :key="ids"
					@click="checked(item.info,ids,optare.id,item)">
					<text>{{optare.name}}</text>
					<image :src="optare.falg?'../../../static/images/xuan.png':  '../../../static/images/wei.png'"
						mode=""></image>
				</view>
				<!-- 	<view class="son" v-if="index==indexs">
					<text>100ml</text>
					<image src="../../../static/images/xuan.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<view class="button" @click="shows">
			确定
		</view>
		<u-modal v-model="show" :content="content" @confirm="submit" show-cancel-button="true"></u-modal>
		<!-- @click="router('../../users/add_operate2/add_operate2')" -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				show: false,
				content: '价格、图片默认为商品价格、图片之前存在规格则会先清空确认生成商品规格吗?',
				indexs: 0,
				typelist: [],
				optare: [],
				details: [],
				idea: '',
				arr1: [],
				arr2: [],
				arry: [],
				tids: [],
				flags: ''

			}
		},
		onLoad(data) {
			this.details = JSON.parse(decodeURIComponent(data.id))
			console.log(this.details);
			this.gettypelist()

		},
		mounted() {

		},
		onShow() {},
		methods: {
			opare(id, tid, info) {
				this.typelist[id].flag = !this.typelist[id].flag
				console.log('规格类型', info);
				if (info.length < 1) {
					uni.showToast({
						title: '请添加详细规格',
						icon: 'none',
						duration: 700
					})
				} else {
					if (this.typelist[id].flag == true) {
						if (this.tids.length < 2) {
							this.tids.push(tid)
						} else {
							this.typelist[id].flag = false
							uni.showToast({
								title: '最多选择两种类型',
								icon: 'none',
								duration: 700
							})
						}
					} else if (this.typelist[id].flag == false) {
						console.log(222);
						for (let z = 0; z < this.tids.length; z++) {
							this.tids.splice(z, 1)
						}
					}
				}
			},

			checked(item, index, id, son) {
				console.log('获取的',item);
				item[index].falg = !item[index].falg
				// console.log('子级选择', son);
				if (this.tids[0] == son.tid) {
					// console.log('加入到数组1');
					if (item[index].falg == true) {
						this.arr1.push(item[index].id)
					} else if (item[index].falg == false) {
						for (let i = 0; i < this.arr1.length; i++) {
							if (id == this.arr1[i]) {
								this.arr1.splice(i, 1)
							}
						}
					}
				} else if (this.tids[1] == son.tid) {
					// console.log('加入到数组2');
					if (item[index].falg == true) {
						this.arr2.push(item[index].id)
					} else if (item[index].falg == false) {
						for (let i = 0; i < this.arr2.length; i++) {
							if (id == this.arr2[i]) {
								this.arr2.splice(i, 1)
							}
						}
					}
				}
				// console.log('数组1', this.arr1);
				// console.log('数组2', this.arr2);

			},
			shows(){
				this.show=true
			},
			submit() {
				console.log(this.arr1.length);
				console.log(this.arr2.length==0);
				if(this.arr2.length==0){
				this.arry=this.arr1
			}else{
				for (let i = 0; i < this.arr1.length; i++) {
					for (let a = 0; a < this.arr2.length; a++) {
						this.arry.push(this.arr1[i] + ',' + this.arr2[a])
					}
				}
			}
			
				console.log('最终数组', this.arry);
				global.$http.request({
					url: '/shopapi/Specs/specsgoodadd',
					data: {
						token: uni.getStorageSync('token'),
						id: this.details.id,
						specs: this.arry,
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 700
						})
						setTimeout(function() {
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 3]; // 前一个页面
							uni.navigateBack({
								delta: 2,
								success: function() {
									beforePage.onLoad(); // 执行前一个页面的onLoad方法
								}
							})
						}, 700)
						this.arry = []
					}
				})
			},
			gettypelist() {
				global.$http.request({
					url: '/shopapi/Specs/typeList',
					data: {
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log('全部',res.data.data);
						this.typelist = res.data.data
					}
				})
			},
			router(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		width: 750rpx;

		background-color: #f7f7f7;
		padding-bottom: 98rpx;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.all {
				.operates {
					.operate {
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #FFF;
						padding: 0rpx 27rpx;
						height: 98rpx;
						line-height: 98rpx;

						text {

							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #060606;
						}

						image {
							width: 10rpx;
							height: 16rpx;
						}
					}

					.son {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 98rpx;
						width: 750rpx;
						line-height: 98rpx;
						padding: 0rpx 27rpx;
						background: #F2F2F2;
						box-shadow: 0rpx -1rpx 0rpx 0rpx #CCCCCC;

						text {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #666666;
						}

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}
				}

			}

			.button {
				position: fixed;
				bottom: 0;
				text-align: center;
				line-height: 98rpx;
				width: 750rpx;
				height: 98rpx;
				background: #FE4E00;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
